<html>
<head>
<title>File APIを用いてPC上の画像ファイルをプレビュー表示&拡大縮小テスト</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
function preview (e) {
// ファイル未選択
if (!e.files.length) return;
// ファイルを取得する
// 想定したMIMEタイプでない場合には処理しない
var errMsg = "";
for (var i = 0; i < e.files.length; i++) {
var file = e.files[i];
if (!/^image\/(png|jpeg|gif)$/.test(file.type)) {
errMsg += "ファイル名: " + file.name + ", 実際のMIMEタイプ: " + file.type + "\n\n";
continue;
}
// Imageを作成
var img = document.createElement('img');
var fr = new FileReader();
fr.tmpImg = img;
fr.onload = function () {
this.tmpImg.src = this.result;
this.tmpImg.onload = function () {
document.getElementById('previewArea').appendChild(this);
}
}
// 画像読み込み
fr.readAsDataURL(file);
}
if (errMsg != "") {
errMsg = "以下ファイルはMIMEタイプが対応していません。\n"
+ "MIMEタイプはimage/png, image/jpeg, image/gifのみ対応です。\n\n"
+ errMsg;
alert(errMsg);
}
}
// 拡大縮小　JavaScript
function kakudai(img_width_px){
$('#previewArea img').animate({width:img_width_px+"px"},3000);
}
function shuku(img_width_px){
$('#previewArea img').animate({width:img_width_px+"px"},3000);
}
</script>
<style type="text/css">
#previewArea img {padding:10px; height:auto;}/* ★ 高さをautoにする */
</style>
</head>
<body>
<br />
<br />
<input type="file" name="file" onchange="preview(this);" multiple="multiple"/><br>
<span style="font-size:small;">※ 複数ファイル選択可</span><br>
<br>
<div id="previewArea" style="width:90%; height:300px; border:1px solid #888; border-radius:15px; overflow-y:auto;">
</div>
<input type="button" value="縮小" onClick="shuku(40)">
<input type="button" value="拡大" onClick="kakudai(300)">
</body>
</html>

